<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Amazon Coupon Distribution Administrator Platform</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/excel-bootstrap-table-filter-style.css">
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div id="app">
        <div id="wrapper">
            
            <div class="overlay"></div>

            <!-- Sidebar -->
            <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
                <ul class="nav sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="#">
                            Management Platform
                        </a>
                    </li>
                    <li>
                        <a href="User-Information.html"><i class="fa fa-fw fa-home"></i> User Information</a>
                    </li>
                    <li>
                        <a href="Coupon-Information.html"><i class="fa fa-fw fa-folder"></i> Coupon Information</a>
                    </li>
                    <li>
                        <a href="Product-Information.html"><i class="fa fa-fw fa-file-o active"></i> Product
                            Information</a>
                    </li>
                </ul>
            </nav>
            <!-- /#sidebar-wrapper -->

            <!-- Page Content -->
            <div id="page-content-wrapper">
                <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                    <span class="hamb-top"></span>
                    <span class="hamb-middle"></span>
                    <span class="hamb-bottom"></span>
                </button>
                <!-- 主页面内容 -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- 筛选开始 -->
                            <div class="panel-body form-inline" id="screen">
                                <label>
                                    <span>productType:</span>
                                    <input type="text" class="form-control " id="inputkind1" v-model="productType">
                                </label>

                                <label>
                                    <span>Trade Name:</span>
                                    <input type="text" class="form-control" id="inputkind2" v-model="productName">
                                </label>
                                <label>
                                    <span>Commodity Price:</span>
                                    <input type="number" class="form-control" id="inputkind3" v-model="productPrice">
                                </label>
                                <label>
                                    <span>Maximum Discount:</span>
                                    <input type="number" class="form-control number-box" id="inputkind3" v-model="highDiscount"
                                        data-min="0" data-max="1">
                                </label>
                                <label>
                                    <span>Minimum Discount:</span>
                                    <input type="number" class="form-control" id="inputkind4" v-model="lowDiscount">
                                </label>
                                <label>
                                    <input type="button" value="Add" class="btn" @click="add()">
                                </label>
                            </div>
                            <!-- 筛选结束 -->
                            <!-- 表格开始 -->
                            <table class="table table-bordered table-hover table-striped table-intel" id="table">
                                <thead>
                                    <tr>
                                        <th class="no-filter no-sort no-search none  ">Id</th>
                                        <th class="no-filter">productType</th>
                                        <th class="no-filter">Trade Name</th>
                                        <th class="no-filter">productPrice</th>
                                        <th class="no-filter">Maximum Discount</th>
                                        <th class="no-filter">Minimum Discount</th>
                                        <th class="no-filter no-sort no-search none">Operation</th>
                                        <!-- <th class="no-filter no-sort no-search none">Operation</th> -->
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr v-for="item in list" :key="item.productId">
                                        <!-- <td class="SortCLASS"></td> -->
                                        <td>{{item.productId}}</td>
                                        <td>{{item.productType}}</td>
                                        <td>{{item.productName}}</td>
                                        <td>{{item.productPrice}}</td>
                                        <td>{{item.highDiscount}}</td>
                                        <td>{{item.lowDiscount}}</td>
                                        <td><a href="" @click.prevent="del(item.productId)">Delete</a></td>
                                        <!-- <td>
                                            <div class="box">
                                                <div class="demo"><a href="javascript:;" class="bounceIn">Grant</a></div>
                                                <div id="dialogBg"></div>
                                        <div id="dialog" class="animated">
                                            <img class="dialogIco" width="50" height="50" src="images/ico.png" alt="" />
                                            <div class="dialogTop">
                                                <a href="javascript:;" class="claseDialogBtn">关闭</a>
                                            </div>
                                            <form action="" method="post" id="editForm">
                                                <ul class="editInfos">
                                                    <li><label>
                                                            <font color="#ff0000">* </font>姓名<input type="text" name=""
                                                                required value="" class="ipt" />
                                                        </label></li>
                                                    <li><label>
                                                            <font color="#ff0000">* </font>电话<input type="text" name=""
                                                                required value="" class="ipt" />
                                                        </label></li>
                                                    <li><label>
                                                            <font color="#ff0000">* </font>地址<input type="text" name=""
                                                                required value="" class="ipt" />
                                                        </label></li>
                                                    <li><input type="submit" value="提交" class="submitBtn" /></li>
                                                </ul>
                                            </form>
                                        </div>
                                        </div>
                                            </td> -->     
                        </div>

                        <!-- <td><a href="" onclick='edit(this.parentNode.parentNode)'>Modify</a></td>
                                        <td><a href="" onclick="update()">update</a></td> -->

                        </tr>
                        </tbody>
                        </table>
                        <!-- 表格结束 -->
                    </div>
                </div>

                <!-- /#page-content-wrapper -->

            </div>
        </div>
        <!-- 弹出框 -->

        <!-- <div class="demo">
                        <a href="javascript:;" class="bounceIn">DEMO1</a>
                        <a href="javascript:;" class="rollIn">DEMO2</a>
                        <a href="javascript:;" class="bounceInDown">DEMO3</a>
                        <a href="javascript:;" class="flipInX">DEMO4</a>
                    </div> -->


        <!-- /#wrapper -->

        <!-- <script src="js/jquery-1.8.3.min.js"></script> -->
        <!-- 侧导航栏 -->
        <script src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var trigger = $('.hamburger'),
                    overlay = $('.overlay'),
                    isClosed = false;

                trigger.click(function () {
                    hamburger_cross();
                });

                function hamburger_cross() {

                    if (isClosed == true) {
                        overlay.hide();
                        trigger.removeClass('is-open');
                        trigger.addClass('is-closed');
                        isClosed = false;
                    } else {
                        overlay.show();
                        trigger.removeClass('is-closed');
                        trigger.addClass('is-open');
                        isClosed = true;
                    }
                }

                $('[data-toggle="offcanvas"]').click(function () {
                    $('#wrapper').toggleClass('toggled');
                });
            });

        </script>

        <!-- 排序、搜索 -->
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/excel-bootstrap-table-filter-bundle.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#table').excelTableFilter({
                    'captions': { a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
                });
            });
        </script>
        <!-- 弹出框操作 -->
        <!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
        <!-- <script type="text/javascript">
            var w, h, className;
            function getSrceenWH() {
                w = $(window).width();
                h = $(window).height();
                $('#dialogBg').width(w).height(h);
            }

            window.onresize = function () {
                getSrceenWH();
            }
            $(window).resize();

            $(function () {
                getSrceenWH();

                //��ʾ����
                $('.box a').click(function () {
                    className = $(this).attr('class');
                    $('#dialogBg').fadeIn(300);
                    $('#dialog').removeAttr('class').addClass('animated ' + className + '').fadeIn();
                });

                //�رյ���
                $('.claseDialogBtn').click(function () {
                    $('#dialogBg').fadeOut(300, function () {
                        $('#dialog').addClass('bounceOutUp').fadeOut();
                    });
                });
            });
        </script> -->
        
        
        <!-- 创建vue实例 -->
        <script>
            Vue.http.options.emulateJSON = true;
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        productId: '',
                        productType: '',
                        productName: '',
                        highDiscount: '',
                        lowDiscount: '',
                        productPrice: '',
                        pictureUrl: '123',
                        list: []
                    }
                },
                created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
                    this.getAllList()
                },
                methods: {
                    getAllList() {
                        this.$http.get('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/ProductController/getAllProducts').then(result => {
                            // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
                            var res = result.data;
                            console.log(res)
                            // this.list=res.data;
                            // console.log(list)
                            if (res.statu === 10000) {
                                // 成功了
                                this.list = res.data
                            } else {
                                // 失败了
                                alert('获取数据失败！')
                            }
                        })

                    },
                    add() { // 添加的方法
                        this.$http.post('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded//GeneralAdministractorController/handleAddNewProduct',
                            { productType: this.productType, productName: this.productName, highDiscount: this.highDiscount, lowDiscount: this.lowDiscount, productPrice: this.productPrice, pictureUrl: this.pictureUrl }, { emulateJSON: true })
                            .then(result => {
                                var res = result.data
                                console.log(res)
                                if (result.data.statu === 10000) {
                                    // 成功了！
                                    // 添加完成后，只需要手动，再调用一下 getAllList 就能刷新列表了
                                    this.getAllList()
                                    // 清空 name 
                                    this.productType = this.productName = this.highDiscount = this.lowDiscount = this.productPrice = ''
                                } else {
                                    // 失败了
                                    alert('添加失败！')
                                }
                            })
                    },
                    del(productId) { // 根据Id删除数据

                        this.$http.get('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded//GeneralAdministractorController/handleDeleteProduct', {
                            params: {
                                productId: productId
                            }
                        }).then(result => {
                            var res = result.data
                            console.log(res)
                            if (res.statu === 10000) {
                                // 删除成功
                                this.getAllList()
                            } else {
                                alert('删除失败！')
                            }
                        })
                    },
                    // grant() {
                    //     this.$http.post('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/GeneralAdministractorController/sendAppoinCouponRecord',
                    //      { productId=this.productId,finalDiscount=this.finalDiscount }, { emulate: true })
                    //         .then(result => {
                    //             var res = result.data
                    //             console.log(res)
                    //             if (result.data.statu === 10000) {
                    //                 // 成功了！
                    //                 alert('发送成功！')
                    //             } else {
                    //                 // 失败了
                    //                 alert('发送失败！')
                    //             }
                    //         })
                    // }

                }
            })
        </script>


</body>

</html>